<template>
  <div class="cube-table-container" ref="containerRef">
    <div class="font-bold p-3 bg-blue-500 text-white">维度</div>
    <a-table size="medium" table-layout-fixed :columns="columns" :data="dimensionFields" :pagination="false">
      <template #field="{ record }">
        {{ record.node.dataType === "calculated" ? "计算字段" : record.node.field }}
      </template>
      <template #title="{ record }">
        <a-input v-model="record.node.title" />
      </template>
      <template #dataType="{ record }">
        <a-cascader v-model="record.node.dataType" size="small" value-type="full" :options="dataTypeMap" />
      </template>
      <template #aggregate />
      <template #format="{ record }">
        <a-space size="5px" v-if="record.node.dataType.includes('yy')">
          时间戳类型 <a-switch size="small" v-model="record.node.format" />
        </a-space>
      </template>
      <template #edit="{ record }">
        <a-button size="mini" @click="BiCube.convertField(record.node)">转换指标</a-button>
      </template>
    </a-table>
    <div class="font-bold p-3 bg-green-500 text-white">指标</div>
    <a-table size="medium" :columns="columns" :data="measureFields" :show-header="false" :pagination="false">
      <template #title="{ record }">
        <a-input v-model="record.node.title" />
      </template>
      <template #dataType="{ record }">
        <a-cascader v-model="record.node.dataType" size="small" value-type="full" :options="dataTypeMap" />
      </template>
      <template #aggregate="{ record }">
        <a-select v-model="record.node.aggregate" size="small" :options="aggregateTypeMap" />
      </template>
      <template #format="{ record }">
        <a-select v-model="record.node.format" size="small" :options="fieldNumberFormats" />
      </template>
      <template #edit="{ record }">
        <a-button size="mini" @click="BiCube.convertField(record.node)">转换维度</a-button>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { inject, ref } from "vue"
import { aggregateTypeMap, dataTypeMap, fieldNumberFormats } from "@/utils/dict.js"
const BiCube = inject("BiCube", {})
console.log(BiCube.schemaStatus)
defineProps({
  dimensionFields: {
    type: Array,
    default: () => []
  },
  measureFields: {
    type: Array,
    default: () => []
  }
})
const columns = ref([
  {
    title: "物理字段名",
    dataIndex: "node.field",
    width: 200,
    slotName: "field"
  },
  {
    title: "展示字段名",
    dataIndex: "node.title",
    width: 200,
    slotName: "title"
  },
  {
    title: "字段类型",
    dataIndex: "node.dataType",
    width: 200,
    "max-width": 200,
    slotName: "dataType"
  },
  {
    title: "聚合方式",
    dataIndex: "node.aggregate",
    slotName: "aggregate",
    width: 200
  },
  {
    title: "展示格式",
    dataIndex: "node.format",
    slotName: "format"
  },
  {
    title: "编辑",
    dataIndex: "edit",
    width: 200,
    slotName: "edit"
  }
])
</script>

<style scoped lang="less">
.cube-table-container {
  width: 100%;
  height: 100%;
}
.bi-awesome-matrix-table {
  font-size: 12px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  .table-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .top-header {
      position: sticky;
      top: 0;
      .row {
        white-space: nowrap;
        &:first-child {
          .table-cell {
            border: none;
            position: relative;
            .cube-table-tip-cell {
              color: #fff;
            }
          }
        }
        .table-cell.hovered {
          //background: rgb(var(--primary-5));
        }
      }
    }
  }
  .data-container {
    .row-data-item {
      &.hovered,
      .table-cell.hovered {
        //background: rgb(var(--primary-5));
      }
    }
  }
  .table-cell {
    display: inline-block;
    white-space: nowrap;
    border: 0 solid #cdd4e3;
    border-bottom-width: 1px;
    vertical-align: top;
    padding: 5px 12px;
    .content {
      display: inline-block;
      line-height: 22px;
      cursor: default;
      .cube-table-tip-cell {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 22px;
        .svg-icon-wrapper {
          line-height: 1;
          font-size: 16px;
          margin-right: 5px;
          display: block;
        }
        .tip-background {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          &.dimension {
            background-color: rgb(var(--primary-6));
          }
          &.measure {
            background-color: rgb(var(--success-6));
          }
        }
      }
      .cube-table-header-cell {
        display: block;
        width: 96px;
      }
    }
    .cube-table-header-cell-top {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      justify-content: flex-start;
    }
    .cube-table-header-cell-bottom {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &.dimension > i {
        color: rgb(var(--primary-6));
      }
      &.measure > i {
        color: rgb(var(--success-6));
      }
    }
  }
  &:hover .table-container {
    overflow-x: auto;
  }
}
.preview-data-refresh-tips {
  height: calc(100% - 100px);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 22px;
  flex-direction: column;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
}
</style>
